<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://www.francescomalagrino.com/BootstrapPageGenerator/3/js/jquery-2.0.0.min.js"></script>
	<script type="text/javascript" src="http://www.francescomalagrino.com/BootstrapPageGenerator/3/js/jquery-ui"></script>
	<link href="http://www.francescomalagrino.com/BootstrapPageGenerator/3/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
	<script type="text/javascript" src="http://www.francescomalagrino.com/BootstrapPageGenerator/3/js/bootstrap.min.js"></script>
	<link href="css/designer_special.css" rel="stylesheet">
	<link rel='stylesheet prefetch' href='css/providerindividualMain.css'>
</head>
<style>
.special{height: 183px !important;margin: 8px;}
</style>

<body>
	<div class="fabiccontent">
	<h3 class="fabicTitle">我的收藏</h3>
	<div class="container-fluid" style="padding: 0 !important;">
		<div class="row-fluid">
			<div class="span12">
				<ul id="myTab" class="nav nav-tabs">
					<li class="active"><a href="#design" data-toggle="tab">
						收藏作品</a></li>
						<li><a href="#clothes" data-toggle="tab">收藏服装</a></li>
						<li><a href="#fabric" data-toggle="tab">收藏面料</a></li>
					</ul>
					<div id="myTabContent" class="tab-content">
						<div class="tab-pane fade in active" id="design">
							<table>
								
								<tr>
									<td>
										<div class="special">
											<img>
											<a class="left">作品名称</a>
											<a class="right">设计师</a>
										</div>
									</td>
									<td>
										<div class="special">
											<img>
											<a class="left">作品名称</a>
											<a class="right">设计师</a>
										</div>
										<td>
											<div class="special">
												<img>
												<a class="left">作品名称</a>
												<a class="right">设计师</a>
											</div>
										</td>
										<td>
											<div class="special">
												<img>
												<a class="left">作品名称</a>
												<a class="right">设计师</a>
											</div>
										</td>
									</tr>
							
							</table>
							<div class="pagination pagination-centered">
								<ul>
									<li>
										<a href="#">上一页</a>
									</li>
									<li>
										<a href="#">1</a>
									</li>
									<li>
										<a href="#">2</a>
									</li>
									<li>
										<a href="#">3</a>
									</li>
									<li>
										<a href="#">4</a>
									</li>
									<li>
										<a href="#">5</a>
									</li>
									<li>
										<a href="#">下一页</a>
									</li>
								</ul>
							</div>
						</div>
						<div class="tab-pane fade" id="clothes">
							<table>
								
								<tr>
									<td>
										<div class="special">
											<img>
											<a class="left">服装名称</a>
											<a class="right">服装企业</a>
										</div>
									</td>
									<td>
										<div class="special">
											<img>
											<a class="left">服装名称</a>
											<a class="right">服装企业</a>
										</div>
										<td>
											<div class="special">
												<img>
												<a class="left">服装名称</a>
												<a class="right">服装企业</a>
											</div>
										</td>
										<td>
											<div class="special">
												<img>
												<a class="left">服装名称</a>
												<a class="right">服装企业</a>
											</div>
										</td>
									</tr>
						
								
							</table>
							

							<div class="pagination pagination-centered">
								<ul>
									<li>
										<a href="#">上一页</a>
									</li>
									<li>
										<a href="#">1</a>
									</li>
									<li>
										<a href="#">2</a>
									</li>
									<li>
										<a href="#">3</a>
									</li>
									<li>
										<a href="#">4</a>
									</li>
									<li>
										<a href="#">5</a>
									</li>
									<li>
										<a href="#">下一页</a>
									</li>
								</ul>
							</div>

						</div>
						<div class="tab-pane fade" id="fabric">
							<table>
								
								<tr>
									<td>
										<div class="special">
											<img>
											<a class="left">面料名称</a>
											<a class="right">供应商</a>
										</div>
									</td>
									<td>
										<div class="special">
											<img>
											<a class="left">面料名称</a>
											<a class="right">供应商</a>
										</div>
										<td>
											<div class="special">
												<img>
												<a class="left">面料名称</a>
												<a class="right">供应商</a>
											</div>
										</td>
										<td>
											<div class="special">
												<img>
												<a class="left">面料名称</a>
												<a class="right">供应商</a>
											</div>
										</td>
									</tr>
							
							</table>
							<div class="pagination pagination-centered">
								<ul>
									<li>
										<a href="#">上一页</a>
									</li>
									<li>
										<a href="#">1</a>
									</li>
									<li>
										<a href="#">2</a>
									</li>
									<li>
										<a href="#">3</a>
									</li>
									<li>
										<a href="#">4</a>
									</li>
									<li>
										<a href="#">5</a>
									</li>
									<li>
										<a href="#">下一页</a>
									</li>
								</ul>
							</div>

						</div>
						

					</div>
					<script>
					$(function() {
						$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
								// 获取已激活的标签页的名称
								var activeTab = $(e.target).text();
								// 获取前一个激活的标签页的名称
								var previousTab = $(e.relatedTarget).text();
								$(".active-tab span").html(activeTab);
								$(".previous-tab span").html(previousTab);
							});
					});
					</script>

				</div>
			</div>
		</div>
	</div>
	</body>

	</html>